<template>
    <div class="top">
        <div class="top-left">
            <i class="top-logo"></i>
            <!-- 项目类型 -->
            <div class="top-menu porject-menu">
                <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link">
                        {{ menuType ? menuType : '全部' }}
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-arrow-down"></use>
                        </svg>
                    </a>
                    <a-menu slot="overlay" @click="typeMenuClick">
                        <a-menu-item key="全部项目">
                            <a>全部项目</a>
                        </a-menu-item>
                        <a-menu-item v-for="item in types" :key="item.value" v-if="item.value != '未分类项目'">
                            <a>{{ item.value }}</a>
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item key="未分类项目">
                            <a>未分类项目</a>
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item key="项目类型配置" @click="typeConfig">
                            <a class="menu-item-set">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shezhi"></use>
                                </svg>
                                项目类型配置
                            </a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </div>
            <!-- 标记复选框 -->
            <div class="check-box">
                <tr class="check-item">
                    <td>
                        <input type="checkbox" v-model="checkedAll" @change="changeAllChecked()" />
                    </td>
                    <td>全部</td>
                </tr>
                <template v-for="(item, index) in checkedAttr">
                    <tr v-if="index < checkboxCount" class="check-item" :key="index">
                        <td><input type="checkbox" :value="item.value" v-model="checkedItems" @change="onCheck" /></td>
                        <td>{{ item.value }}</td>
                    </tr>
                </template>
                <button @click.stop="allCheck = true">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenglve"></use>
                    </svg>
                </button>
                <div class="check-item new-check" v-if="haveData">
                    <div>
                        <input type="checkbox" v-model="showNewData" @change="onCheckNew" />
                        <span>新导入</span>
                    </div>
                </div>
                <!-- 复选框展开 -->
                <div class="all-check" v-show="allCheck" ref="showPanel">
                    <div class="check-item-box">
                        <tr class="check-item">
                            <td>
                                <input type="checkbox" v-model="checkedAll" @change="changeAllChecked()" />
                            </td>
                            <td>全部</td>
                        </tr>
                        <tr v-for="(item, index) in checkedAttr" class="check-item" :key="index">
                            <td><input type="checkbox" :value="item.value" v-model="checkedItems" @change="onCheck" />
                            </td>
                            <td>{{ item.value }}</td>
                        </tr>
                    </div>
                    <div class="ckeck-set" @click="tagConfig">
                        <a>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shezhi"></use>
                            </svg>
                            配置标记
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-right">
            <div class="input-box">
                <a-input-search placeholder="输入关键字..." style="max-width: 200px" @search="onSearch" class="input" />
            </div>
            <!-- 按星级筛选 -->
            <div class="top-menu star-menu-box">
                <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" @click.prevent>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-wujiaoxingxingxing"></use>
                        </svg>
                        {{ menuStar ? menuStar : '按评分筛选' }}
                        <svg class="icon clear" v-if="menuStar != undefined" @click.stop="clearStar">
                            <use xlink:href="#icon-cuowuguanbiquxiao"></use>
                        </svg>
                    </a>
                    <a-menu slot="overlay" @click="handleMenuClick">
                        <a-menu-item v-for="(item, index) in menuStarItem" :key="index" class="star-item">
                            {{ item }}
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </div>
            <!-- 按时间段筛选 -->
            <div class="top-menu">
                <a-range-picker :locale="locale" :disabled-date="disabledDate" @change="onChangeTime">
                    <span class="time">
                        <svg class="icon star" aria-hidden="true">
                            <use xlink:href="#icon-shijian"></use>
                        </svg>
                        {{ menuTiem ? menuTiem : '按时间段筛选' }}
                        <svg class="icon clear" v-if="menuTiem != undefined" @click.stop="clearTime">
                            <use xlink:href="#icon-cuowuguanbiquxiao"></use>
                        </svg>
                    </span>
                </a-range-picker>
            </div>
            <!-- 导入导出 -->
            <div class="button-box">
                <button class="button-snatch" @click="snatch">
                    <i class="snatch-img"></i>
                    抓取项目
                </button>
                <button class="button-export" @click="output">
                    <i class="export-img"></i>
                    导出项目
                </button>
            </div>
            <!-- 头像 -->
            <div class="profile-box">
                <a-dropdown :trigger="['click']">
                    <i :style="{ backgroundImage: 'url(' + backgroundImage + ')' }" class="defunct"></i>
                    <template #overlay>
                        <a-menu class="logout-box">
                            <a-menu-item @click="logout()" class="logout">
                                <span>退出登录</span>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
import { mapState, mapActions } from "vuex";

export default {
    name: 'navroot',
    data() {
        return {
            locale: locale,  // 日期选择框中文
            allCheck: false,  //控制复选框盒子展开
            checkedAll: true,  //全选复选框状态
            // 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
            checkedItems: [],
            backgroundImage: 'https://cdn.lessonplan.cn/Public/IMG/default-avatar.png',
            menuType: undefined,  //项目类型名
            menuTiem: undefined,  //时间段
            menuStar: undefined,  //星级评分筛选
            menuStarItem: ['五颗星', '四颗星以上', '三颗星以上', '两颗星以上', '一颗星以上', '未评分'],
            showNewData: false,    // 表格是否显示新增的数据
        };
    },
    created() {
        // 初始化项目类型和标记
        this.initType();
        this.initTag();
    },
    mounted() {
        // 点击空白处标记复选框收回
        document.addEventListener('click', (e) => {
            if (this.$refs.showPanel) {
                let isSelf = this.$refs.showPanel.contains(e.target)
                if (!isSelf) {
                    this.allCheck = false
                }
            }
        });
    },
    props: {
        // 新导入复选框显示
        checkedDatas: {
            default: []
        }
    },
    computed: {
        ...mapState({
            // 项目类型
            types: (state) => state.project.types,
            // 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
            checkedAttr: (state) => state.project.tag,
            // 浏览器宽度
            windowWidth: (state) => state.windowWidth.windowWidth,
            // 是否显示新增数据
            haveData: (state) => state.project.haveData,
        }),
        // 复选框显示数量随浏览器宽度变化
        checkboxCount() {
            if (this.checkedItems.length == 0 && this.checkedAll == true) {
                let checked = []
                this.checkedAttr.forEach((item,index) => {
                    checked[index] = item.value
                })
                this.checkedItems = checked
            }
            if (this.windowWidth >= 1650) {
                return 3
            } else if (this.windowWidth < 1650 && this.windowWidth >= 1550) {
                return 2
            } else {
                return 1
            }
        }
    },
    methods: {
        ...mapActions({ initType: 'initType', initTag: 'initTag' }),
        // 类型配置
        typeConfig() {
            this.$emit("openTypeConfig")
        },
        //标记配置
        tagConfig() {
            this.$emit("openTagConfig")
        },
        // 抓取项目页面弹窗
        snatch() {
            this.$emit("openCapture");
        },
        // 新导入复选框
        onCheckNew(e) {
            this.showNewData = e.target.checked;
            this.$store.commit('setShowNewData', this.showNewData)
        },
        // 全选复选框
        changeAllChecked() {
            if (this.checkedAll) {
                this.checkedAttr.forEach((item, index) => {
                    this.checkedItems[index] = item.value
                })
            } else {
                this.checkedItems = [];
            }
        },
        // 不能选择的日期
        disabledDate(current) {
            return current > moment().endOf('day');
        },
        //按时间段筛选
        onChangeTime(date, dateString) {
            if (dateString[0] == '' || dateString[1] == '') {
                this.menuTiem = '按时间段筛选';
            } else {
                var reg = new RegExp('-', 'g');  //g,表示全部替换。
                this.menuTiem = '' + dateString[0].replace(reg, '.') + ' - ' + dateString[1].replace(reg, '.') + '';
            }
            console.log(dateString);
            this.$emit('getDate', dateString)
        },
        // 清除时间段筛选
        clearTime() {
            this.menuTiem = undefined
            this.$emit('getDate', "0")
        },
        // 按关键字筛选
        onSearch(value) {
            this.$emit('getWord', value)
        },
        // 项目类型
        typeMenuClick(e) {
            if (e.key != '项目类型配置') {
                var reg = new RegExp('项目', 'g');
                this.menuType = e.key.replace(reg, '');
                let type = e.key
                this.$emit('conditionType', type)
            }
        },
        //  按星级筛选
        handleMenuClick(e) {
            this.menuStar = this.menuStarItem[e.key]
            let score = 5 - e.key
            this.$emit('getScore', score)
        },
        // 清除星级筛选
        clearStar() {
            this.menuStar = undefined
            let score = 0
            this.$emit('getScore', score)
        },
        //退出
        logout() {
            this.$confirm('确定要退出账号吗?', () => {
                window.localStorage.removeItem('LESSONPLAY_TOKEN');
                location.href = `http://${window.location.host}/`;
            })
        },
        // 按标记筛选
        onCheck(e) {
            this.checkedItems.forEach(item => {
                if (item === e.target.value) {
                }
            })
            let tag = this.checkedItems
            this.$emit('getTag', tag)
        },
        // 项目导出
        output() {
            console.log(this.checkedDatas);
            if (this.checkedDatas.length == 0) {
                this.$message.warning('您还没有选择项目！')
            } else if (this.checkedDatas.length > 1) {
                this.$message.warning('当前不支持导出多个项目')
            } else {
                this.$confirm(`确认导出 ${this.checkedDatas[0].title} 吗?`, async () => {
                    let id = this.checkedDatas[0].id
                    await this.$api.projectMessage.export(id);
                })
            }
        }
    },
    watch: {
        // 监听复选框项是否全部选中
        checkedItems: {
            handler() {
                if (this.checkedItems.length == this.checkedAttr.length) {
                    // 如果所有复选框项全部被选中,则全选复选框也被勾选
                    this.checkedAll = true;
                } else {
                    this.checkedAll = false;
                }
            }
        },
    },
};
</script>

<style scoped lang="scss">
@import "./nav.scss";
</style>
